﻿

function CRUDcontextMenuDOM(e,
                            strHeader,
                            strDeleteLabel,
                            strEditLabel,
                            strDetailsLabel,
                            idCrudContextMenu,
                            idCrudContextDelete,
                            idCrudContextEdit,
                            idCrudContextDetails) {
    /*
    <div class="contextMenu dropdown clearfix">
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
            <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
            <li class="divider"></li>
            <li><a href="#"><i class="icon-edit"></i> Edit</a></li>
            <li><a href="#"><i class="icon-eye-open"></i> Details</a></li>
        </ul>
    </div>
    */
    
    return $('<div />', { 'id': idCrudContextMenu,
                            'class': 'dropdown clearfix',
                            'style': 'display: block; ' +
                                    'position: absolute; ' +
                                    'left: ' + e.pageX + 'px; ' +
                                    'top: ' + e.pageY + 'px; '
                        })
                .append($('<ul />', {'class': 'dropdown-menu',
                                        'role': 'menu',
                                        'aria-labelledby': 'dropdownMenu',
                                        'style': 'display:block;position:static;margin-bottom:5px;'})

                    .append($('<li />', { 'class': 'nav-header' }).text(strHeader))
                    .append($('<li />')
                        .append($('<a />', { 'id': idCrudContextDelete })
                            .append($('<i />', { 'class': 'icon-trash' })
                            )
                        .append($('<span />').text(strDeleteLabel))
                        )
                    )
                    .append($('<li />', { 'class': 'divider' }))
                    .append($('<li />')
                        .append($('<a />', { 'id': idCrudContextEdit })
                            .append($('<i />', { 'class': 'icon-edit' })

                            )
                        .append($('<span />').text(strEditLabel))
                        )
                    )
                    .append($('<li />')
                        .append($('<a />', { 'id': idCrudContextDetails })
                            .append($('<i />', { 'class': 'icon-eye-open' })
                            )
                        .append($('<span />').text(strDetailsLabel))
                        )
                    )
                );
}

function AddEventHandler_CRUDContextMenu(crdCtxMenu,
                                         idCrudContextMenu,
                                         idCrudContextDelete,
                                         idCrudContextEdit,
                                         idCrudContextDetails,
                                         funcDelete, 
                                         funcEdit,
                                         funcDetails) {

    var crudContextMouseDownEvent = function (mouseDownEvent) {
        
        $('#' + idCrudContextMenu).remove();
  
        if ((mouseDownEvent.which == 3)) {
            
            //append the dynamic menu
            $('body').append(crdCtxMenu);
            
            $('#' + idCrudContextDelete).one("mousedown", function () {
                funcDelete();
            });
            $('#' + idCrudContextEdit).one("mousedown", function () {
                funcEdit();
            });
            $('#' + idCrudContextDetails).one("mousedown", function () {
                funcDetails();
            });

            //prevent browser specific context menu from beeing displayed
            $(this).one('contextmenu', function () { return false; });
        } else {
            $('#' + idCrudContextDelete).off("mousedown", function () {
                funcDelete();
            });
            $('#' + idCrudContextEdit).off("mousedown", function () {
                funcEdit();
            });
            $('#' + idCrudContextDetails).off("mousedown", function () {
                funcDetails();
            });
            $('body').off("mousedown", crudContextMouseDownEvent);
        }
    };

    $('body').on("mousedown", crudContextMouseDownEvent);
}

function CRUDContextMenu(e,
                         strHeader,
                         strDeleteLabel,
                         strEditLabel,
                         strDetailsLabel,
                         funcDelete,
                         funcEdit,
                         funcDetails) {
    
    var idCrudContextMenu       = 'idCrudContext_Menu';
    var idCrudContextDelete     = 'idCrudContext_Delete';
    var idCrudContextEdit       = 'idCrudContext_EditFunc';
    var idCrudContextDetails    = 'idCrudContext_DetailsFunc';



    var crdCtxMenu = CRUDcontextMenuDOM(e,
                                        strHeader,
                                        strDeleteLabel,
                                        strEditLabel,
                                        strDetailsLabel,
                                        idCrudContextMenu,
                                        idCrudContextDelete,
                                        idCrudContextEdit,
                                        idCrudContextDetails);


    AddEventHandler_CRUDContextMenu(crdCtxMenu,
                                    idCrudContextMenu,
                                    idCrudContextDelete,
                                    idCrudContextEdit,
                                    idCrudContextDetails,
                                    funcDelete,
                                    funcEdit,
                                    funcDetails);
};
